

<div class="layui-form" lay-filter="layuiadmin-form-role" id="groupform">
	<div class="form-cont">
		<div class="layui-form-item verify">
		  <label class="layui-form-label">分组名称</label>
		  <div class="layui-input-block">
			  <input type="text" verify="requirel2" v-model="detail.device_group_name" placeholder="请输入分组名称" class="layui-input">
			  <span class="hint">分组名称必填</span>
			</div>
		</div>

		<div class="layui-form-item verify">
		  <label class="layui-form-label">模式</label>
		  <div class="layui-input-block">
		      <div class="layui-unselect layui-form-select">
		      	<div class="layui-select-title usage_chosc"><input type="text" name='usage_mode' :data='detail.usage_mode' placeholder="请选择模式" class="layui-input layui-unselect" readonly><i
		      		 class="layui-edge"></i></div>
		      	<dl class="layui-anim layui-anim-upbit">
		      		<dd class="layui-select-tips layui-this">请选择</dd>
		      		<dd :data='index+1' v-for="(x,index) in select">{{x}}</dd>
		      	</dl>
		      </div>
		  </div>
		</div>
		
		<div class="layui-form-item verify">
		  <label class="layui-form-label">计费配置</label>
		  <div class="layui-input-block">
		      <div class="layui-unselect layui-form-select">
		      	<div class="layui-select-title"><input type="text" name='cost_id' @click="pzF" :data='detail.device_rule_id' placeholder="请选择计费配置" class="layui-input layui-unselect" readonly><i
		      		 class="layui-edge"></i></div>
		      	<dl class="layui-anim layui-anim-upbit">
		      		<dd class="layui-select-tips layui-this">请选择</dd>
		      		<dd :data='x.device_rule_id' v-for="x in pz">{{x.rule_name}}</dd>
		      	</dl>
		      </div>
			  <!-- <span class="hint">计费配置必选</span> -->
		  </div>
		</div>
		
		<div class="layui-form-item verify">
		  <label class="layui-form-label" style="font-size:10px;">酒店计费配置</label>
		  <div class="layui-input-block">
		      <div class="layui-unselect layui-form-select">
		      	<div class="layui-select-title"><input type="text" name='hotelid' @click="pzJ" :data='detail.hotel_id' placeholder="请选择计费配置" class="layui-input layui-unselect" readonly><i
		      		 class="layui-edge"></i></div>
		      	<dl class="layui-anim layui-anim-upbit">
		      		<dd class="layui-select-tips layui-this">请选择</dd>
		      		<dd :data='x.hotel_id' v-for="x in jd">{{x.activity_name}}</dd>
		      	</dl>
		      </div>
			  <!-- <span class="hint">酒店计费配置必选</span> -->
		  </div>
		</div>		
<!--		<div class="layui-form-item verify">-->
<!--		  <label class="layui-form-label">活动配置</label>-->
<!--		  <div class="layui-input-block">-->
<!--		      <div class="layui-unselect layui-form-select">-->
<!--		      	<div class="layui-select-title"><input type="text" name='yx_id' @click="activityS" :data='detail.activity_id' placeholder="请选择营销配置" class="layui-input layui-unselect" readonly><i-->
<!--		      		 class="layui-edge"></i></div>-->
<!--		      	<dl class="layui-anim layui-anim-upbit yx_dl">-->
<!--		      		<dd class="layui-select-tips layui-this yx_dd">请选择</dd>-->
<!--		      		<dd :data='x.activity_id' v-for="x in activity">{{x.activity_name}}</dd>-->
<!--		      	</dl>-->
<!--		      </div>-->
<!--			  &lt;!&ndash; <span class="hint">营销配置必选</span> &ndash;&gt;-->
<!--		  </div>-->
<!--		</div>-->
		
		<div class="layui-form-item verify">
		  <label class="layui-form-label" style="font-size:10px;">绑定后的免费时间(小时)</label>
		  <div class="layui-input-block">
			  <input type="number" v-model="detail.free_time" placeholder="请输入被绑定后的免费时间" class="layui-input">
			</div>
		</div>
		
		<div class="layui-form-item verify">
		  <label class="layui-form-label">分组信息</label>
		  <div class="layui-input-block">
		      <textarea type="text" class="layui-textarea" verify="requirel2" v-model="detail.group_desc" placeholder="请输入分组信息"></textarea>
			  <span class="hint">分组信息必填</span>
		  </div>
		</div>
	</div>
  <div class="form-btn" v-if="type!=3">
      <input type="button" value="确认" class="layui-btn" @click="submit">
  </div>
</div>

<script>
	layui.use(['form'], function(){
	  var $ = layui.$
	  ,form = layui.form;
	  var groupform=new Vue({
	  		el:'#groupform',
	  		data:{
	  			detail:{
					device_rule_id:'',
					activity_id:'',
					usage_mode:'',
					hotel_id:'',
					mode:''
				},
				old_detail:{},
				type:layui.admin.objDatas.type,
				pz:'',
				activity:'',
				jd:'',
				select:['校园模式','酒店模式']
	  		},
	  		mounted() {
				//初始化
	  			if(this.type!=1) this.detail=layui.admin.objDatas.detail,this.old_detail=JSON.stringify(layui.admin.objDatas.detail);

				$('input[name="cost_id"]').val(this.detail.rule_name);
				$('input[name="yx_id"]').val(this.detail.activity_name);
				$('input[name="hotelid"]').val(this.detail.hotel);
				$('input[name="usage_mode"]').val(this.detail.mode);

	  		},
	  		methods:{
	  			submit:function(){
	  				if(layui.admin.form('#groupform')){

	  					this.detail.device_rule_id=parseInt($('input[name="cost_id"]').attr('data'));
	  					this.detail.activity_id=parseInt($('input[name="yx_id"]').attr('data'));
	  					this.detail.usage_mode=parseInt($('.usage_chosc input[name="usage_mode"]').attr('data'));
	  					this.detail.hotel_id=parseInt($('input[name="hotelid"]').attr('data'));

						//this.detail.activity_ids=parseInt($(".yx_dl .yx_dd").attr('data'));
						//console.log(this.detail); return false;

						if(this.type==2){   //编辑
							var data=layui.admin.filter(this.detail,JSON.parse(this.old_detail),'device_group_id');

							if(data){
								layui.admin.ajax('device/group_update',data).then(function(res){
									layer.close(layui.admin.pupsc);
									layui.table.reload('list-select-table');
								});
							}else{
								layer.close(layui.admin.pupsc);
							}
						}else{  //添加
							
							layui.admin.ajax('device/group_add',this.detail).then(function(res){
								layer.close(layui.admin.pupsc);
								layui.table.reload('list-select-table');
							});
						}
	  				}
	  			},
				pzF:function(){
					var _this=this;
					if(!this.pz){
						layui.admin.ajax('device/rule_list',{},1).then(function(res){
							_this.pz=res.data.list;
						});
					}
				},
				pzJ:function(){
					var _this=this;
					if(!this.jd){
						layui.admin.ajax('device/hotel_rule_list',{},1).then(function(res){
							_this.jd=res.data.list;
						});
					}
				},
				activityS:function(){
					var _this=this;
					if(!this.activity){
						layui.admin.ajax('device/activity_list',{},1).then(function(res){
							_this.activity=res.data;
						});
					}
				}
	  		}
	  	})
	});
</script>
